 <template>
 	<view>
 		<!-- 页面详情页面 -->
 		<!-- 线路详情轮播图 -->
 		<view class="head">
 			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
 				previous-margin="10px" next-margin="20px" easing-function="easeInOutCubic" duration="2000">
 				<swiper-item v-for="(item, i) in swiperList" :key="i">
 					<!-- 通过每个页面id进行跳转  未实现 -->
 					<navigator class="swiper-item">
 						<image :src="item.imgSrc"></image>
 					</navigator>
 				</swiper-item>
 			</swiper>
 		</view>
 		<!-- 课程信息 -->
 		<view class="middleContent">
 			<view class="upcontent">
 				<view style="display: flex;">
 					<view class="className" style="flex: 2; padding: 10px; font-weight: bold;">课程名称:
 						{{classList.className}}
 					</view>
 				</view>

 				<view class="classPrice">￥{{classList.classPrice}}/人</view>
 				<view class="classIntroduce">详细介绍: {{classList.classIntroduce}}</view>
 			</view>
 			<view class="classCoupons" @click="gotoCoupons" style="height: 40px;">
 				<view class="Coupons" style="color: #b6b6b6; font-size: 15px;">优惠券</view>
 				<view class="reducemoney" style=" font-size: 12px; color: #058e73; padding-left: 15px;">新人优惠立减500
 				</view>
 				<view style="padding-right: 3px;">
 					<uni-icons type="right" :size="15" color="#b6b6b6"></uni-icons>
 				</view>
 			</view>
 		</view>
 		<view class="imageClass">
 			<view v-for="(item,index) in imgClass" :key="index">
 				<image style="width: 100%; padding-bottom: 42px;" :src="item" mode="widthFix"></image>
 			</view>
 		</view>
 		<!-- 优惠券弹出框 -->
 		<view class="mask" @touchmove.stop.prevent="moveHandle">
 			<uni-popup ref="popup" type="bottom">
 				<view class="couponsPopup">
 					<scroll-view style="height: 300rpx;" scroll-y>
 						<view class="test-popup">
 							<view v-for="(item,i) in couponsList" :key="i" @click="recive(item)">
 								<view class="tickets">
 									<view class="l-tickets">
 										<view class="lTicketsLeft">
 											<view class="ticketsAmount">
 												<text
 													style="font-size: 45rpx; font-weight:300;">￥</text>{{ item.amount }}
 											</view>
 											<view class="ticketsAmountDetail">
 												<view v-if="item.type==0">{{item.tag}}地区可用 </view>
 												<view v-else-if="item.type==1">新人卷 </view>
 											</view>
 										</view>
 									</view>
 									<view class="r-tickets">
 										<view class="ticketsBtn">
 										</view>
 									</view>
 								</view>
 							</view>
 						</view>
 					</scroll-view>
 				</view>
 			</uni-popup>
 		</view>

 		<!-- 日历 -->
 		<view class="mask" @touchmove.stop.prevent="moveHandle">
 			<u-calendar :maxDate="maxDate" :show="show" @confirm="confirm" @close="close">
 			</u-calendar>
 		</view>
 		<!-- 底部导航栏 -->
 		<view class="custom-tab-bar">
 			<view class="tab-item" style="flex: 3;">
 				<u-button open-type="share" type="plain">
 					<view style="display: flex; flex-direction: column;">
 						<image src="/static/share.png" class="icon"></image>
 						<text style="font-size: 14px;">分享</text>
 					</view>
 				</u-button>
 			</view>
 			<view class="tab-item" v-if="isCollectActivity==true" style="flex: 3;">
 				<image src="/static/shoucang.png" class="icon" @click="collection"></image>
 				<text style="font-size: 14px;">取消收藏</text>
 			</view>
 			<view class="tab-item" v-else style="flex: 3;">
 				<image src="/static/collection.png" class="icon" @click="collection"></image>
 				<text style="font-size: 14px;">收藏</text>
 			</view>
 			<view class="tab-item" style="flex: 4; border-left: 1px gainsboro solid; height: 50rpx;">
 				<view class="openOrder" @click="openClander">
 					<text>立即预定</text>
 				</view>
 			</view>

 		</view>
 		<!-- 遮罩层 -->
 		<u-overlay :show="toOverlay" mask-click-able="false">
 			<u-loading-icon text="加载中" textSize="18"></u-loading-icon>
 		</u-overlay>
 	</view>
 	</view>
 </template>

 <script>
 	import {
 		eventBus
 	} from '@/eventBus.js';
 	import {
 		mapMutations
 	} from 'vuex'
 	import {
 		mapState
 	} from 'vuex'
 	const d = new Date()
 	const year = d.getFullYear()
 	let month = d.getMonth() + 1
 	month = month < 10 ? `0${month}` : month
 	// 格式化月份
 	const date = d.getDate()
 	export default {
 		data() {
 			return {
 				value: '',
 				couponsList: [],
 				haveCoupons: [],
 				reducemoney: '',
 				classList: {
 					className: '',
 					classPrice: '',
 					classIntroduce: ''
 				},
 				swiperList: [],
 				classId: '',
 				show: false,
 				maxDate: `${year}-${month}-${date}`,
 				reciveType: '领取优惠券',
 				isExpired: '',
 				loading: false,
 				toOverlay: false,
 				isDisabled: false,
 				isCollectActivity: null,
 				imgClass: [],
 				travelDays: '',
 				activityEndDate: '',
 				loading: true,
 				purposeLocation: ''
 			};
 		},
 		mounted() {
 			// 监听事件并更新属性值
 			eventBus.$on('updateValue', value => {
 				this.value = value
 				this.show = this.value;
 			});
 		},
 		computed: {
 			...mapState('m_user', ['userInfo', 'token']),
 		},
 		//分享好友
 		onShareAppMessage() {
 			return {
 				title: '智慧研途', //分享标题 这个可以根据业务需求去定义
 				path: '@/subpkg/detailLine/detailLine' //例如：path: 'page/home/index'
 			}
 		},
 		//分享朋友圈
 		onShareTimeline() {
 			return {
 				title: '智慧研途', //分享标题 这个可以根据业务需求去定义
 				path: '@/subpkg/detailLine/detailLine' //例如：path: 'page/home/index'
 			}
 		},
 		onLoad(e) {
 			this.classId = e.activityId
 			this.getClassList()
 			this.getClassList()
 			this.isCollect()
 			if (this.token !== '' && this.token !== null) {
 				this.isCollect()
 			}
 		},
 		methods: {
 			...mapMutations('timeArray', ['updateTimeArray']),
 			moveHandle() {},
 			//分享页面
 			sharePage() {
 				onShareAppMessage()
 			},
 			async isCollect() {
 				if (this.token !== '' && this.token !== null) {
 					let collectQuery = {
 						activityId: this.classId,
 						userId: this.userInfo.data.data.id
 					}
 					let result = await uni.$u.http.get("/user/activity/isCollection/", {
 						params: collectQuery,
 						custom: {
 							auth: true
 						}
 					})
 					// result.data是true为已收藏

 					this.isCollectActivity = result.data.data
 				}


 			},
 			// 获取活动具体信息
 			async getClassList() {
 				// 渲染
 				const {
 					data: res
 				} = await uni.$u.http.get("/user/activity/getActivityDetail/" + this.classId, {
 					custom: {
 						auth: true
 					}
 				})
 				if (res.code !== 1) return uni.$showMsg()
 				uni.showToast({
 					title: '加载成功',
 					duration: 1000,
 					icon: 'success'
 				});
 				this.swiperList = res.data.activityImagePath
 				this.classList.className = res.data.activityName
 				this.classList.classPrice = res.data.price
 				this.classList.classIntroduce = res.data.description
 				var persistentDay = res.data.travelDays
 				this.purposeLocation = res.data.purposeLocation //目的地
 				this.maxDate = res.data.activityEndDate
 				this.travelDays = res.data.travelDays
 				this.activityEndDate = res.data.activityEndDate
 				for (var i = 0; i < res.data.activityDetailImage.length; i++) {
 					if (this.imgClass.indexOf(res.data.activityDetailImage[i].imgSrc) === -1) {
 						this.imgClass.push(res.data.activityDetailImage[i].imgSrc)
 					}
 				}
 			},
 			// 获取优惠券
 			async gotoCoupons() {
 				this.$refs.popup.open('bottom') //底部弹出
 				const {
 					data: res
 				} = await uni.$u.http.get("/user/coupon/getAllCoupon", {
 					custom: {
 						auth: true
 					}
 				})
 				this.couponsList = res.data
 				this.reducemoney = this.couponsList[1].amount
 			},
 			// 领取优惠券
 			async recive(item) {
 				if (this.userInfo.statusCode !== 200) {
 					uni.navigateTo({
 						url: '/subpkg/loginPage/loginPage',
 					})
 				} else {
 					this.reciveType = false
 					this.isExpired = item.isExpired
 					const res = await uni.$u.http.post("/user/coupon/getCoupon/" + item.id, null, {
 						custom: {
 							auth: true
 						},
 					}).then(result => {
 						if (result.statusCode !== 200) {} else {
 							this.toOverlay = false
 							if (result.data.code != 0) {
 								uni.showToast({
 									title: '领取成功',
 									icon: 'success',
 									duration: 1000
 								})
 							} else {
 								uni.showToast({
 									title: '已领取',
 									title: '领取过了',
 									icon: 'error',
 									duration: 1000
 								})
 							}
 						}
 						this.cancel()
 					}).catch(err => {
 						uni.navigateBack({
 							delta: 999
 						});
 					})
 				}
 			},
 			// 优惠券取消按钮
 			cancel() {
 				this.$refs.popup.close()
 			},
 			// 点击具体日子跳转下单页面带着日期
 			confirm(e) {
 				this.show = false
 				if (this.userInfo.statusCode !== 200) {
 					uni.navigateTo({
 						url: '/subpkg/loginPage/loginPage'
 					})
 				} else {
 					let activityId = this.classId
 					let dateValue = []
 					dateValue.push(e[0], this.travelDays, this.classList.classPrice)
 					uni.navigateTo({
 						url: '/subpkg/Orders/Orders?activityId=' + activityId + '&purposeLocation=' + this
 							.purposeLocation
 					})
 					this.updateTimeArray(dateValue)
 				}
 			},
 			// 关闭日历
 			close() {
 				this.show = false
 			},
 			// 点击下单打开日历
 			openClander() {
 				eventBus.$emit('updateValue', 'true');
 			},
 			toUpdateMyPage() {
 				let updateDate = {
 					isAdd: this.isCollectActivity,
 					idData: this.classId
 				}
 				eventBus.$emit('updateMyPage', updateDate);
 			},
 			// 收藏
 			async collection() {
 				if (this.userInfo.statusCode !== 200) {
 					uni.navigateTo({
 						url: '/subpkg/loginPage/loginPage',
 					})
 					this.$forceUpdate()
 				} else {
 					uni.showLoading({
 						title: '加载中...',
 					});
 					if (this.isCollectActivity == false) {
 						//添加收藏
 						const res = await uni.$u.http.post("/user/activity/collection/" + this.classId, null, {
 							custom: {
 								auth: true
 							}
 						}).then(result => {
 							if (result.statusCode !== 200) {} else {
 								if (result.data.code != 0) {
 									uni.showToast({
 										title: '收藏成功',
 										icon: 'success',
 										duration: 1000
 									})
 									this.isCollectActivity = !this.isCollectActivity
 									//发送更新信息到我的界面
 									this.toUpdateMyPage()

 								} else {
 									uni.showToast({
 										title: '已收藏',
 										icon: 'error',
 										duration: 1000
 									})
 								}
 							}
 						}).catch(err => {
 							uni.navigateBack({
 								delta: 999
 							});
 						})
 					} else if (this.isCollectActivity == true) {
 						await uni.$u.http.delete("/user/activity/cancelCollection/" + this.classId, null, {
 							custom: {
 								auth: true
 							}
 						}).then(res => {
 							uni.showToast({
 								title: '已取消收藏',
 								icon: 'success',
 								duration: 1000
 							})
 							this.isCollectActivity = !this.isCollectActivity
 							this.toUpdateMyPage()
 						}).catch(() => {
 							return uni.showToast({
 								title: '发生错误',
 								icon: 'error',
 								duration: 1000
 							})
 						}).finally(() => {
 							this.toOverlay = false

 						})

 					}
 				}
 			}
 		}
 	}
 </script>

 <style lang="scss">
 	.head {

 		.swiper-item,
 		image {
 			border-radius: 20px 20px 20px 20px;
 			border: 1px solid #ffffff;
 			width: 100%;
 			height: 100%;
 		}
 	}

 	.middleContent {
 		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 		border-radius: 15px 15px 15px 15px;
 		line-height: 50px;
 		margin: 10px;
 		padding: 12px;

 		.upcontent {
 			line-height: 20px;

 			.classPrice {
 				color: #058e73;
 				padding: 5px 0;
 			}

 			.classIntroduce {
 				padding: 5px 0;
 				font-size: 13px;
 			}
 		}

 		.classCoupons {
 			display: flex;
 		}
 	}



 	.button-text {
 		color: #fff;
 		font-size: 12px;
 	}

 	.test-popup {
 		height: 200px;
 		position: relative;

 		.couponsTitle {
 			text-align: center;
 			padding: 8px;
 			font-size: 15px;
 		}



 		.cancel {
 			position: fixed;
 			bottom: 0px;
 			width: 100%;
 			color: #fff;
 			text-align: center;
 			background-color: #000000;
 			border-radius: 5px 5px 0 0;
 		}

 	}

 	.title {
 		color: $u-primary;
 		text-align: center;
 		padding: 20rpx 0 0 0;
 	}

 	.custom-tab-bar {
 		padding-bottom: 10px;
 		display: flex;
 		justify-content: space-around;
 		align-items: center;
 		position: fixed;
 		bottom: 0;
 		left: 0;
 		right: 0;
 		height: 50px;
 		background-color: #fff;
 		z-index: 99;
 	}

 	.tab-item {
 		flex: 1;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 	}

 	.openOrder {
 		display: flex;
 		flex-direction: column;
 		width: 95px;
 		height: 45px;
 		border-radius: 30rpx;
 		background-color: #058e73;
 		color: white;
 		align-items: center;
 		justify-content: center;
 	}

 	.icon {
 		width: 24px;
 		height: 24px;
 	}

 	.couponsPopup {
 		margin-bottom: 50rpx;
 		background-color: #8ae0e7;
 	}

 	.tickets {
 		display: flex;
 		padding: 20rpx;
 		width: 100%;
 		height: 230rpx;
 		box-sizing: border-box;

 		.lTicketsLeft {
 			display: flex;
 			flex-direction: column;
 			width: 30%;
 			align-items: center;
 			margin-top: 20rpx;

 			.ticketsAmount {
 				font-size: 70rpx;
 				color: #ffff7f;
 				font-weight: bold;
 			}

 			.ticketsAmountDetail {
 				margin-left: 20rpx;
 				font-size: 22rpx;
 				color: #636363;
 			}
 		}
 	}

 	.l-tickets {
 		width: 75%;
 		background: skyblue;
 	}

 	.r-tickets {
 		flex: 1;
 		background: orchid;
 	}

 	.l-tickets {
 		width: 75%;
 		height: 100%;
 		position: relative;
 	}

 	.l-tickets::after {
 		content: '';
 		position: absolute;
 		height: 100%;
 		width: 8rpx;
 		top: 0;
 		left: -8rpx;
 		/* 
   	语法：
   	background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit; 
   	radial-gradient(shape size at position, start-color, ..., last-color);
   */
 		background: radial-gradient(circle at left center, transparent 8rpx, skyblue 0) left center / 8rpx 20rpx;
 	}

 	.r-tickets {
 		flex: 1;
 		position: relative;
 	}

 	.r-tickets::after {
 		content: '';
 		position: absolute;
 		height: 100%;
 		width: 8rpx;
 		top: 0;
 		right: -8rpx;
 		background: radial-gradient(circle at right center, transparent 8rpx, orchid 0) right center / 8rpx 20rpx;
 	}

 	.l-tickets {
 		width: 75%;
 		height: 100%;
 		position: relative;
 		background: radial-gradient(circle at right top, transparent 16rpx, skyblue 0) right top / 100% 50% no-repeat,
 			radial-gradient(circle at right bottom, transparent 16rpx, skyblue 0) right bottom / 100% 50% no-repeat;
 	}

 	.r-tickets {
 		position: relative;
 		background: radial-gradient(circle at left top, transparent 16rpx, orchid 0) right top / 100% 50% no-repeat,
 			radial-gradient(circle at left bottom, transparent 16rpx, orchid 0) right bottom / 100% 50% no-repeat;
 	}

 	.r-tickets::before {
 		content: '';
 		width: 1rpx;
 		background: linear-gradient(to top, #fff 0%, #fff 50%, transparent 50%) top left / 1rpx 20rpx repeat-y;
 		position: absolute;
 		left: 0;
 		top: 16rpx;
 		bottom: 16rpx;
 	}

 	.l-tickets {
 		width: 75%;
 		height: 100%;
 		position: relative;
 		background: radial-gradient(circle at right top, transparent 16rpx, skyblue 0) right top / 100% 50% no-repeat,
 			radial-gradient(circle at right bottom, transparent 16rpx, skyblue 0) right bottom / 100% 50% no-repeat;
 		filter: drop-shadow(-3px 0 3px rgba(0, 0, 0, .3));
 	}

 	.r-tickets {
 		position: relative;
 		background: radial-gradient(circle at left top, transparent 16rpx, orchid 0) right top / 100% 50% no-repeat,
 			radial-gradient(circle at left bottom, transparent 16rpx, orchid 0) right bottom / 100% 50% no-repeat;
 		filter: drop-shadow(3px 0 3px rgba(0, 0, 0, .3));
 	}

 	.l-tickets {
 		width: 75%;
 		position: relative;
 		background: radial-gradient(circle at right top, transparent 16rpx, #ffc854 0, #FFB300 100%) right top / 100% 50% no-repeat,
 			radial-gradient(circle at right bottom, transparent 16rpx, #ffc854 0, #FFB300 100%) right bottom / 100% 50% no-repeat;
 		filter: drop-shadow(-3px 0 3px rgba(0, 0, 0, .3));
 	}

 	.l-tickets::after {
 		content: '';
 		position: absolute;
 		height: 100%;
 		width: 8rpx;
 		top: 0;
 		left: -8rpx;
 		background: radial-gradient(circle at left center, transparent 8rpx, #FFB300 0) left center / 8rpx 20rpx;
 	}

 	.ticketsBtn {
 		margin-top: 50rpx;
 	}

 	.r-tickets {
 		flex: 1;
 		position: relative;
 		background: radial-gradient(circle at left top, transparent 16rpx, #ffc854 0, #ffcc61 100%) right top / 100% 50% no-repeat,
 			radial-gradient(circle at left bottom, transparent 16rpx, #ffc854 0, #ffcc61 100%) right bottom / 100% 50% no-repeat;
 		filter: drop-shadow(3px 0 3px rgba(0, 0, 0, .3));
 	}

 	.r-tickets::before {
 		content: '';
 		width: 1rpx;
 		background: linear-gradient(to top, #fff 0%, #fff 50%, transparent 50%) top left / 1rpx 20rpx repeat-y;
 		position: absolute;
 		left: 0;
 		top: 16rpx;
 		bottom: 16rpx;
 	}

 	.r-tickets::after {
 		content: '';
 		position: absolute;
 		height: 100%;
 		width: 8rpx;
 		top: 0;
 		right: -8rpx;
 		background: radial-gradient(circle at right center, transparent 8rpx, #ffcc61 0) right center / 8rpx 20rpx;
 	}
 </style>